<template>
  <component :is="IconComp" v-if="IconComp" />
</template>

<script lang="ts" setup>
import { computed, markRaw, onMounted, ref } from 'vue';
const props = defineProps<{ icon: string }>();
const icon = computed(() => props.icon);

const IconComp = ref<any>(null);

/**
 * 自动动态加载图标组件：
 * icon = "F7TimerFill"
 * pack = "ionicons5" → 实际路径：@vicons/ionicons5
 */
onMounted(async () => {
  try {
    const mod = (await import(`@vicons/material`)) as Record<string, any>;
    IconComp.value = markRaw(mod[icon.value]);
  } catch (err) {
    console.error(`图标加载失败: ${icon.value} `, err);
  }
});
</script>

<style lang="less" scoped></style>
